window.onload = function() {
    var checkAll = document.querySelector('#checkAll');
    var checkAllLabel = document.querySelector('#checkAll+label');
    var checkboxs = document.querySelectorAll('input[name=item]');
    var dd = document.querySelector('dd');
    var fx = document.querySelector('dt a')
    checkAll.addEventListener('change', function() {
        var flag = this.checked //true代表被选中
        if (flag) {
            //用遍历选中所有item
            checkboxs.forEach(function(el) {
                    el.checked = true
                })
                //改变文字
            checkAllLabel.innerText = "全不选"

        } else {
            checkboxs.forEach(function(el) {
                el.checked = false
            })
            checkAllLabel.innerText = "全选"
        }
    });
    // checkboxs.forEach(function(el) {
    //     el.addEventListener('change', function(e) {
    //         if (!e.target.checked) {
    //             //取消全选
    //             checkAll.checked = false;
    //             checkAllLabel.innerText = "全选"

    //         }
    //         //改动一个判断其他的选项的状态
    //         //allFlag判断所有项目是否全部选中，如果全部选中则为true，否则为false
    //         var allFlag = Array.from(checkboxs).every(function(el) {
    //             return el.checked
    //         });
    //         if (allFlag) {
    //             checkAll.checked = true;
    //             checkAllLabel.innerText = "全不选"
    //         }
    //     });


    // })
    //通过事件代理的方式，效果和上面一样
    dd.addEventListener('change', function(e) {
        if (!e.target.checked) {
            //取消全选
            checkAll.checked = false;
            checkAllLabel.innerText = "全选"

        }
        var allFlag = Array.from(checkboxs).every(function(el) {
            return el.checked
        });
        if (allFlag) {
            checkAll.checked = true;
            checkAllLabel.innerText = "全不选"
        }

    });

    fx.addEventListener('click', function() {
        checkboxs.forEach(function(el) {
            var flag = el.checked;
            // if(flag){el.checked=false}else{el.checked=true}
            // flag?el.checked=false:el.checked=true
            el.checked = !flag
        });

        var allFlag = Array.from(checkboxs).every(function(el) {
            return el.checked
        });

        if (allFlag) {
            checkAll.checked = true;
            checkAllLabel.innerText = "全不选"
        } else {
            checkAll.checked = false;
            checkAllLabel.innerText = "全选"
        }


    })


}